Skip to content

change paratext extension to work as an iframe in paratext#1750

Merged
hahn-kev merged 7 commits into
developfrom
update-pt10-extension
Jun 18, 2025
Merged

change paratext extension to work as an iframe in paratext#1750
hahn-kev merged 7 commits into
developfrom
update-pt10-extension

Conversation

@hahn-kev

@hahn-kev hahn-kev commented Jun 9, 2025

Copy link
Copy Markdown
Collaborator

@coderabbitai

coderabbitai Bot commented Jun 9, 2025

Copy link
Copy Markdown

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This update modifies both backend and frontend components. The backend adjusts server rendering security policies and ensures correct working directory setup. The frontend transitions from a custom web component to an iframe-based viewer, updates build tasks and dependencies, enhances CSS for iframe integration, and adds cross-window messaging to display notifications in the viewer.

Changes

Files/Paths Change Summary
backend/FwLite/FwLiteWeb/FwLiteWebServer.cs Configured Razor Components to set a stricter Content Security Policy for frame ancestors.
backend/FwLite/FwLiteWeb/Program.cs Sets working directory to the assembly location at startup to resolve JavaScript loading issues.
frontend/platform.bible-extension/Taskfile.yml Renamed and updated build tasks; adjusted dependencies and commands for viewer build integration.
frontend/platform.bible-extension/package.json Removed the local "viewer" package dependency.
frontend/platform.bible-extension/src/extension-template.web-view.tsx Replaced custom component with iframe; implemented postMessage communication to iframe; introduced React ref for iframe.
frontend/platform.bible-extension/src/main.ts Added allowedFrameSources property to web view; removed an import log statement.
frontend/platform.bible-extension/src/styles.css Expanded CSS to target html, div, and iframe; set 100% sizing and hid iframe borders.
frontend/viewer/src/ShadcnProjectView.svelte Added support for receiving postMessages and displaying notifications using a new event handler and type guard.

Poem

A bunny hopped through code today,
Swapping components for iframes—hooray!
Messages now leap from frame to view,
With stricter security shining through.
CSS stretches wide and neat,
Notifications pop up—what a treat!
🐇✨


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions

github-actions Bot commented Jun 9, 2025

Copy link
Copy Markdown
Contributor

UI unit Tests

10 tests  ±0   10 ✅ ±0   0s ⏱️ ±0s
 3 suites ±0    0 💤 ±0 
 1 files   ±0    0 ❌ ±0 

Results for commit 8abc8d4. ± Comparison against base commit 21dea06.

♻️ This comment has been updated with latest results.

@argos-ci

argos-ci Bot commented Jun 9, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Jun 13, 2025, 12:17 PM

@github-actions

github-actions Bot commented Jun 9, 2025

Copy link
Copy Markdown
Contributor

C# Unit Tests

116 tests  ±0   116 ✅ ±0   10s ⏱️ ±0s
 17 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 8abc8d4. ± Comparison against base commit 21dea06.

♻️ This comment has been updated with latest results.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (1)
frontend/platform.bible-extension/src/main.ts (1)

29-31: Consider more specific port configuration for better security.

While restricting to localhost is good for security, the wildcard port (*) could allow connections to unintended services running on localhost.

Consider using a specific port or range:

-allowedFrameSources: ['http://localhost:*']
+allowedFrameSources: ['http://localhost:29348']

Or if multiple ports are needed, specify them explicitly:

-allowedFrameSources: ['http://localhost:*']
+allowedFrameSources: ['http://localhost:29348', 'http://localhost:29349']
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 21dea06 and a5f2c48.

⛔ Files ignored due to path filters (1)
  • frontend/platform.bible-extension/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (8)
  • backend/FwLite/FwLiteWeb/FwLiteWebServer.cs (1 hunks)
  • backend/FwLite/FwLiteWeb/Program.cs (1 hunks)
  • frontend/platform.bible-extension/Taskfile.yml (1 hunks)
  • frontend/platform.bible-extension/package.json (1 hunks)
  • frontend/platform.bible-extension/src/extension-template.web-view.tsx (2 hunks)
  • frontend/platform.bible-extension/src/main.ts (2 hunks)
  • frontend/platform.bible-extension/src/styles.css (1 hunks)
  • frontend/viewer/src/ShadcnProjectView.svelte (2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/platform.bible-extension/src/extension-template.web-view.tsx (1)
frontend/platform.bible-extension/src/types/fw-lite-extension.d.ts (1)
  • FindEntryEvent (8-11)
⏰ Context from checks skipped due to timeout of 90000ms (7)
  • GitHub Check: Build UI / publish-ui
  • GitHub Check: Build API / publish-api
  • GitHub Check: Build FW Lite and run tests
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: check-and-lint
  • GitHub Check: frontend
  • GitHub Check: Analyze (csharp)
🔇 Additional comments (13)
frontend/platform.bible-extension/src/styles.css (1)

10-12: LGTM! Border removal is appropriate for seamless iframe integration.

The border removal ensures the iframe integrates seamlessly without visual boundaries.

frontend/platform.bible-extension/package.json (1)

77-79: LGTM! Dependency removal aligns with iframe-based architecture.

Removing the local "viewer" dependency is appropriate since the viewer is now loaded via iframe rather than imported as a component.

frontend/platform.bible-extension/src/main.ts (1)

118-118: LGTM! Code formatting improvement.

The blank line improves readability before the process spawn call.

backend/FwLite/FwLiteWeb/FwLiteWebServer.cs (1)

123-126: LGTM: Correctly implements CSP for iframe embedding.

The Content Security Policy configuration appropriately allows framing from the same origin and localhost with any port, which aligns with the iframe-based architecture implemented in the frontend components.

frontend/platform.bible-extension/src/extension-template.web-view.tsx (3)

4-4: LGTM: Correctly added useRef import.

The useRef import is properly added to support the iframe reference functionality.


10-10: LGTM: Proper iframe ref initialization.

The iframe ref is correctly typed and initialized for managing the iframe element.


32-32: LGTM: Properly implemented iframe element.

The iframe element correctly uses the ref and src attributes for the iframe-based architecture.

frontend/viewer/src/ShadcnProjectView.svelte (2)

24-24: LGTM: Proper import for notifications.

The AppNotification import is correctly added to support displaying cross-frame messages.


60-60: LGTM: Proper window event listener binding.

The window message event listener is correctly bound using Svelte's event binding syntax.

frontend/platform.bible-extension/Taskfile.yml (4)

15-15: LGTM: Correctly removed viewer component dependency.

The removal of build-viewer-component dependency aligns with the architectural shift from embedded components to iframe-based integration.


20-20: LGTM: Consistent dependency update for run task.

The run task correctly mirrors the package task dependency changes.


25-25: LGTM: Proper dependency chain for iframe architecture.

Adding build-viewer as a dependency to build-fw-lite-web ensures the viewer application is built before the web server, which is correct for the iframe-based approach.


28-30: LGTM: Task rename and command update align with architecture change.

The task rename from build-viewer-component to build-viewer and the command change to build-app correctly reflect the shift from building a component library to building a standalone application for iframe embedding.

Comment thread frontend/platform.bible-extension/src/styles.css
Comment thread backend/FwLite/FwLiteWeb/Program.cs
Comment thread frontend/viewer/src/ShadcnProjectView.svelte
Comment thread frontend/viewer/src/ShadcnProjectView.svelte

@myieye myieye left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work getting this working again! 🎉
And tanks or the comments for our future selves 😉

I did not try running this, because that would take me a while and I figure we'll run it often enough as soon as we start getting serious about it.

Comment thread frontend/platform.bible-extension/src/main.ts Outdated
Co-authored-by: Tim Haasdyk <tim_haasdyk@sil.org>
@hahn-kev hahn-kev added the 💻 FW Lite issues related to the fw lite application, not miniLcm or crdt related label Jun 18, 2025
@hahn-kev hahn-kev merged commit 2a83fd1 into develop Jun 18, 2025
25 checks passed
@hahn-kev hahn-kev deleted the update-pt10-extension branch June 18, 2025 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💻 FW Lite issues related to the fw lite application, not miniLcm or crdt related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants